<template>
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <validation-observer ref="observer" v-slot="{validate}">
      <form method="post">
        <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">邮箱</label>
          <ValidationProvider rules="required|email" v-slot="{ errors }">
            <div class="layui-input-inline">
              <input
                type="text"
                id="L_email"
                name="username"
                required
                v-model="username"
                autocomplete="off"
                value
                class="layui-input"
              />
            </div>
            <div class="layui-form-mid form-error">{{ errors[0] }}</div>
            <!-- <div class="layui-form-mid layui-word-aux">
          如果您在邮箱已激活的情况下，变更了邮箱，需
          <a
            href="activate.html"
            style="font-size: 12px; color: #4f99cf;"
          >重新验证邮箱</a>。
            </div>-->
          </ValidationProvider>
        </div>
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">昵称</label>
          <validation-provider rules="required" name="昵称" v-slot="{ errors }">
            <div class="layui-input-inline">
              <input
                type="text"
                id="L_username"
                name="name"
                v-model="name"
                required
                lay-verify="required"
                autocomplete="off"
                value
                class="layui-input"
              />
            </div>
            <div class="layui-form-mid form-error">{{ errors[0] }}</div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <label for="L_city" class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <input
              type="text"
              id="L_city"
              name="location"
              v-model="location"
              autocomplete="off"
              value
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label label for="L_sign" class="layui-form-label mr1">性别</label>
          <div class="layui-input-inline mt1">
            <label for="gender1" class="mr1">
              <input
                id="gender1"
                v-model="gender"
                type="radio"
                name="sex"
                value="0"
                checked
                title="男"
              />
              <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio': gender==='0'}"></i>
              男
            </label>
            <label for="gender2">
              <input id="gender2" v-model="gender" type="radio" name="sex" value="1" title="女" />
              <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio': gender==='1'}"></i>
              女
            </label>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label for="L_sign" class="layui-form-label">签名</label>
          <div class="layui-input-block">
            <textarea
              placeholder="随便写些什么刷下存在感"
              id="L_sign"
              name="remark"
              v-model="remark"
              autocomplete="off"
              class="layui-textarea"
              style="height: 80px;"
            ></textarea>
          </div>
        </div>

        <div class="layui-form-item">
          <button class="layui-btn" type="button" @click="validate().then(submit)">确认修改</button>
        </div>
      </form>
    </validation-observer>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { updateUserInfo } from '@/api/user.js'
export default {
  name: 'my-info',
  data () {
    return {
      gender: '0',
      location: '',
      username: '',
      name: '',
      remark: ''
    }
  },
  components: {
    ValidationProvider,
    ValidationObserver
  },
  mounted () {
    const { gender, location, username, name, remark } = this.$store.state.userInfo
    this.gender = gender || ''
    this.location = location || ''
    this.username = username
    this.name = name
    this.remark = remark || ''
  },
  methods: {
    async submit () {
      const valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      const data = {
        username: this.username,
        location: this.location,
        gender: this.gender,
        name: this.name,
        remark: this.remark
      }
      const res = await updateUserInfo(data)
      if (res.code === 200) {
        this.$store.commit('setUserInfo', {
          ...this.$store.state.userInfo,
          ...{
            location: this.location,
            gender: this.gender,
            name: this.name,
            remark: this.remark
          }
        })
        this.$pop('', res.msg)
      } else {
        this.$pop('', res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-icon-radio {
  color: #5fb878;
}
</style>
